<template>
  <router-layout>
    <section class="header">
      <div class="header-back">
        <div class="header-title">
          <span>
            连续签到
            <b>{{sing.day_num || 0}}</b>天
          </span>
        </div>
        <div v-if="isSign" class="header-unsign" @click="sign"></div>
        <div v-else class="header-sign"></div>
        <div v-show="isSign" class="header-note">
          <img
            src="https://gw.alicdn.com/tfs/TB1VuxMOhnaK1RjSZFBXXcW7VXa-26-30.png"
            width="13"
            height="15"
          >
          <span>签到纪录</span>
        </div>
      </div>
    </section>
    <section class="content">
      <div v-for="(item, index) in signs" :key="index">
        <div>
          <span>{{item.day}}</span>
        </div>
        <div class="img-box">
          <img
            v-if="item.src"
            src="https://gw.alicdn.com/tfs/TB130yySgHqK1RjSZFEXXcGMXXa-80-112.png"
            width="40"
          >
          <img
            v-else
            src="https://gw.alicdn.com/tfs/TB1fjirShTpK1RjSZR0XXbEwXXa-80-112.png"
            width="40"
          >
          <p class="text-box">
            <span v-if="item.src" style="color:rgb(242, 89, 51);font-size:16px">√</span>
            <span v-else style="color:rgb(252, 252, 253)">0</span>
          </p>
        </div>
      </div>
    </section>
    <!-- 签到弹窗 -->
    <section class="dialog" v-if="isShow">
      <div class="make" @touchmove.prevent></div>
      <div class="dialog-conent" @touchmove.prevent>
        <div class="list-name">
          <img
            v-bind:src="info.portrait?info.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
            alt
          >
          <p>{{info.user_name}}</p>
        </div>
        <div class="dialog-num">
          <p>签到成功 + {{sing.score || 0}} 积分</p>
          <p>继续加油</p>
        </div>
        <div style="text-align: center;">
          <div class="dialog-btn" @click="isShow=!isShow">知道了</div>
        </div>
      </div>
    </section>
  </router-layout>
</template>
<script>
import moment from "moment";
import view_title from "../../../components/public/title/title";
import { signIn, listSignin } from "@/api/home";
export default {
  components: { view_title },
  data() {
    return {
      isShow: false,
      isSign: 0,
      signs: [],
      sing: [],
      info: {}
    };
  },
  methods: {
    fmtDay(n) {
      /**
       * doc：接收一个整数，单位（天）
       *      当参数为正代表前n天，反之为后n天
       */
      return moment()
        .subtract(n, "days")
        .format("M.DD");
    },
    initWeek(backSigns) {
      const args = [3, 2, 1, 0, -1, -2, -3];
      const signed = backSigns.reverse();
      args.forEach((item, i) => {
        this.signs[i] = { src: signed[i] ? signed[i].signIn : 0 };
        if (item === 0) {
          this.signs[i].day = "今天";
        } else {
          this.signs[i].day = this.fmtDay(item);
        }
      }, this);
    },
    async sign() {
      try {
        let user = {};
        if (localStorage.user) {
          user = JSON.parse(localStorage.getItem("user"));
        }
        let parment = { user_id: user.id, company_id: user.company_id };
        let { data } = await signIn(parment);
        if (data.status == 100) {
          this.sing = data.data;
          this.isShow = true;
          await this.initList();
        }
      } catch (error) {
        if (error.data.status == 101) {
          this.$toast("您今天的签到次数已达上限");
        }
      }
    },
    async initList() {
      let { data } = await listSignin();
      const listSign = data.data.rows;
      this.isSign = !listSign[0].signIn;
      if (data.status === 100) {
        this.initWeek(data.data.rows);
        this.sing.day_num = data.data.day_num;
      }
    }
  },
  created() {
    if (localStorage.user) {
      this.info = JSON.parse(localStorage.getItem("user"));
    }
    this.info.portrait = localStorage.getItem("headimgurl");
    this.initList();
  }
};
</script>
<style lang="scss" scoped>
@import "./../../index/sign/sign.scss";
</style>
<style lang="scss" scoped>
.header {
  position: relative;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  background-color: #fafafa;
  .header-back {
    background-image: url("https://gw.alicdn.com/tfs/TB1PvAON9zqK1RjSZPcXXbTepXa-572-580.png");
    background-size: cover;
    width: 93%;
    height: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .header-title {
      margin-top: 9px;
      font-size: 20px;
      color: #fff;
      letter-spacing: 0;
      b {
        font-family: "PingFangSC-Medium";
        font-size: 30px;
        margin: 0 8px;
      }
    }
    .header-unsign {
      background-image: url("https://gw.alicdn.com/tfs/TB1xo8eOjDpK1RjSZFrXXa78VXa-180-180.png");
      background-size: cover;
      width: 90px;
      height: 90px;
      margin-top: 7px;
    }
    .header-sign {
      background-image: url("https://gw.alicdn.com/tfs/TB1izRqOkvoK1RjSZFNXXcxMVXa-180-180.png");
      background-size: cover;
      width: 90px;
      height: 90px;
      margin-top: 7px;
    }
    .header-note {
      position: absolute;
      top: 84%;
      right: 7%;
      display: flex;
      justify-content: flex-end;
      span {
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: right;
        line-height: 15px;
        margin-left: 5px;
      }
    }
  }
}

.content {
  width: 100%;
  height: 125px;
  background-color: #fff;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;
  div {
    text-align: center;
    div {
      margin: 19px 0;
      font-size: 14px;
      color: #8590a6;
      letter-spacing: 0;
    }
  }
}
.img-box {
  position: relative;
  .text-box {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
